<template>
	<view class="order-container">
		<view class="page-header">
			<view class="header-title">我的订单</view>
			<view class="header-subtitle">查看和管理您的所有订单</view>
		</view>

		<view class="content-section">
			<view class="section-header">
				<view class="section-title">
					<view class="title-decoration"></view>
					<text>订单列表</text>
				</view>
			</view>

			<view class="order-list" v-if="data.itemLst && data.itemLst.length > 0">
				<view
					class="order-item"
					v-for="item in data.itemLst"
					:key="item.orderId"
					@click="onClick(item.orderId)"
				>
					<view class="order-item-header">
						<text class="order-name">{{item.userName}}</text>
						<text class="order-status" :class="{'status-active': item.paymentStatus == 1}">
							{{item.paymentStatus == 1 ? '已生效' : '未生效'}}
						</text>
					</view>
					<view class="order-item-content">
						<view class="order-info">
							<text class="order-label">订单金额:</text>
							<text class="order-value">￥{{(item.payableFee * 100).toFixed(2)}}元</text>
						</view>
						<view class="order-info">
							<text class="order-label">下单时间:</text>
							<text class="order-value">{{timestampToDate(item.paymentTime)}}</text>
						</view>
					</view>
					<view class="order-item-footer">
						<text class="order-more">查看详情</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="empty-state" v-else>
				<text class="empty-text">暂无订单</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import api from '../../utils/api';
	import {
		getOptions,
		toPlainObject,
		timestampToDate
	} from '@/utils/util';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	
	const onClick = (orderId) => {
		uni.navigateTo({
			url: `/pages/orderDetail/orderDetail?orderId=${orderId}`
		})
	}
	const pageData = reactive({
		"code": 0,
		"msg": null,
		"clsName": "DataPageRes<OrderInfoRes>",
		"data": {
			"recordCount": 1,
			"curPage": 1,
			"pageSize": 20,
			"pageNum": 1,
			"itemLst": [{
				"orderId": 2,
				"userId": 1,
				"skuId": 1,
				"organId": 1,
				"goodsFee": 50000,
				"deductFee": 0,
				"payableFee": 50000,
				"paymentType": 0,
				"paymentStatus": 1,
				"paymentTime": 1740839459,
				"orderStatus": 4,
				"hasRefund": 0,
				"refundFee": 0,
				"createTime": 1740839189,
				"userName": "郭永超",
				"refundLst": null
			}],
			"now": null
		}
	})
	const data = pageData.data
	onMounted(async () => {
		const options = getOptions() // 获取当前页面传来参数
		if(!options) return uni.showToast({
			title:'获取订单列表失败'
		})
		try{
			const response = await api.orderInfoList();
		}catch (error) {
			console.error('请求失败:', error);
		}
	})

	// 分享给朋友
	onShareAppMessage(() => {
		return {
			title: '我的订单 - 飞手之家',
			path: '/pages/myOrder/myOrder',
			imageUrl: '/static/images/head.jpg'
		};
	});

	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: '我的订单 - 飞手之家',
			query: '',
			imageUrl: '/static/images/head.jpg'
		};
	});
</script>

<style lang="scss" scoped>
.order-container {
	background-color: #f6f8fa;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

.page-header {
	background-color: #2cbaff;
	padding: 40rpx 40rpx 60rpx;
	color: #fff;
	position: relative;
	margin-bottom: 30rpx;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.header-subtitle {
	font-size: 26rpx;
	opacity: 0.9;
}

.content-section {
	width: 92%;
	margin: 0 auto 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	margin-bottom: 30rpx;
}

.section-title {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.title-decoration {
	width: 8rpx;
	height: 32rpx;
	background-color: #2cbaff;
	border-radius: 4rpx;
	margin-right: 16rpx;
}

.order-list {
	display: flex;
	flex-direction: column;
}

.order-item {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	border: 1px solid #eaeaea;
}

.order-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.order-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.order-status {
	font-size: 26rpx;
	color: #999;
	padding: 4rpx 16rpx;
	background-color: #f5f5f5;
	border-radius: 20rpx;
}

.status-active {
	color: #fff;
	background-color: #2cbaff;
}

.order-item-content {
	padding: 16rpx 0;
}

.order-info {
	display: flex;
	margin-bottom: 10rpx;
}

.order-label {
	font-size: 28rpx;
	color: #666;
	width: 150rpx;
}

.order-value {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.order-item-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 16rpx;
	border-top: 1rpx solid #f0f0f0;
}

.order-more {
	font-size: 26rpx;
	color: #2cbaff;
	margin-right: 6rpx;
}

.empty-state {
	padding: 60rpx 0;
	text-align: center;
	color: #999;
}

.empty-text {
	font-size: 28rpx;
}
</style>